<template lang="html">
  <div class="box">
    <header-title :titlemain='title'></header-title>
    <ul class="voucher_header">
      <li class="header_Dan">已使用</li>
      <li>未使用</li>
    </ul>
    <ul class="voucher_main">
      <li v-for='item in list'>
        <img :src="item.imgurl">
        <div class="main_name">
          <h2>{{item.num}}</h2>
          <h3>{{item.title}}</h3>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
import title from "../geren/header_title.vue";
export default {
  name: 'geren',
  data () {
    return {
      title:"代金券",
      list:[{
        imgurl:'https://ss1.bdstatic.com/kvoZeXSm1A5BphGlnYG/skin_zoom/43.jpg',
        num:"无门槛代金券",
        title:'本代金券可在平台促销专区使用'
      },{
        imgurl:'https://ss1.bdstatic.com/kvoZeXSm1A5BphGlnYG/skin_zoom/43.jpg',
        num:"无门槛代金券",
        title:'本代金券可在平台促销专区使用'
      },{
        imgurl:'https://ss1.bdstatic.com/kvoZeXSm1A5BphGlnYG/skin_zoom/43.jpg',
        num:"无门槛代金券",
        title:'本代金券可在平台促销专区使用'
      },{
        imgurl:'https://ss1.bdstatic.com/kvoZeXSm1A5BphGlnYG/skin_zoom/43.jpg',
        num:"无门槛代金券",
        title:'本代金券可在平台促销专区使用'
      }]
    }
  },
  components:{
    'header-title':title
  }
}
</script>

<style scoped lang="less">
@import '../../../assets/less/index.less';
.box {
  background-color:@color8; 
  .voucher_header{
    width: 100vw;
    height: 13.3vw;
    border-top: solid 1px @color8;
    border-bottom: solid 2vw @color8;
    background-color: @color1;
    li{
      width: 50%;
      height: 13.3vw;
      line-height: 13.3vw;
      font-size: @h1_font_size;
      float: left;
    }
    .header_Dan{
      border-bottom: solid 0.5vw @color;
    }
  }
  .voucher_main{
    width: 100vw;
    li{
      width: @width;
      height: 24vw;
      margin: 3vw auto;
      background-color: @color1;
      img{
        display: inline-block;
        width: 24vw;
        height: 24vw;
        float: left;
      }
      .main_name{
        width: 64.66vw;
        height: 18.66vw;
        margin:2.5vw 0vw 3vw 2vw;
        border: solid 1px @color;
        float: left;
        h2{
          margin-top: 3vw;
          line-height: 8vw;
          font-size: @h2_font_size;
          color: @color7;
        }
        h3{
          font-size: @h4_font_size;
          color: @color2;
        }
      }
    }
  }
}
</style>